<template>
  <div class="paper-list-container">
    <div class="header">
      <h2>试卷列表</h2>
      <el-button type="primary" @click="showCreateDialog">创建试卷</el-button>
    </div>
    
    <div class="table-container">
      <el-table :data="paperList" style="width: 100%" border stripe>
        <el-table-column prop="paperName" label="试卷名称" min-width="180" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="totalScore" label="试卷总分" width="100" align="center" />
        <el-table-column label="操作" width="250" align="center">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="info" @click="handleView(scope.row)">查看</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <div class="total-count">共 {{ total }} 条</div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10]"
        layout="prev, pager, next, jumper"
        :total="total"
        :pager-count="5"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看试卷详情对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      :title="isEdit ? '编辑试卷' : '试卷详情'"
      width="80%"
      :close-on-click-modal="false"
      center
      class="paper-dialog"
    >
      <el-tabs v-model="activeTab" class="paper-tabs">
        <el-tab-pane label="基本信息" name="basicInfo">
          <el-descriptions :column="2" border v-if="!isEdit" class="paper-descriptions">
            <el-descriptions-item label="试卷名称">{{ currentPaper.paperInfo?.paperName }}</el-descriptions-item>
            <el-descriptions-item label="试卷说明">{{ currentPaper.paperInfo?.paperDescription }}</el-descriptions-item>
            <el-descriptions-item label="考试时长">{{ currentPaper.paperInfo?.examDuration }}分钟</el-descriptions-item>
            <el-descriptions-item label="试卷总分">{{ currentPaper.paperInfo?.totalScore }}分</el-descriptions-item>
            <el-descriptions-item label="及格分数">{{ currentPaper.paperInfo?.passScore }}分</el-descriptions-item>
            <el-descriptions-item label="题库选择">{{ currentPaper.paperInfo?.questionBank }}</el-descriptions-item>
          </el-descriptions>
          <el-form :model="currentPaper.paperInfo" label-width="150px" v-else class="paper-form">
            <el-form-item label="试卷名称" required>
              <el-input v-model="currentPaper.paperInfo.paperName" placeholder="请输入试卷名称"></el-input>
            </el-form-item>
            <el-form-item label="试卷说明">
              <el-input v-model="currentPaper.paperInfo.paperDescription" type="textarea" :rows="3" placeholder="请输入试卷说明"></el-input>
            </el-form-item>
            <el-form-item label="考试时长" required>
              <div class="input-with-unit">
                <el-input-number v-model="currentPaper.paperInfo.examDuration" :min="1" :max="180" controls-position="right"></el-input-number>
                <span class="unit">分钟</span>
              </div>
            </el-form-item>
            <el-form-item label="试卷总分" required>
              <div class="input-with-unit">
                <el-input-number v-model="currentPaper.paperInfo.totalScore" :min="1" :max="100" controls-position="right"></el-input-number>
                <span class="unit">分</span>
              </div>
            </el-form-item>
            <el-form-item label="及格分数" required>
              <div class="input-with-unit">
                <el-input-number v-model="currentPaper.paperInfo.passScore" :min="1" :max="currentPaper.paperInfo.totalScore" controls-position="right"></el-input-number>
                <span class="unit">分</span>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="题型配置" name="questionType">
          <el-descriptions :column="2" border v-if="!isEdit" class="paper-descriptions">
            <template v-for="type in currentPaper.questionTypeConfig?.selectedTypes" :key="type">
              <el-descriptions-item :label="type + '个数'">{{ currentPaper.questionTypeConfig[type]?.count }}</el-descriptions-item>
              <el-descriptions-item :label="type + '分值'">{{ currentPaper.questionTypeConfig[type]?.score }}</el-descriptions-item>
              <el-descriptions-item :label="type + '规则'" :span="2">{{ currentPaper.questionTypeConfig[type]?.rule }}</el-descriptions-item>
            </template>
          </el-descriptions>

          <!-- 添加题目预览部分 -->
          <div v-if="!isEdit && currentPaper.questions" class="question-preview">
            <h3 class="preview-title">题目预览</h3>
            <div v-for="(question, index) in currentPaper.questions" :key="question.id" class="preview-question">
              <div class="question-header">
                <span class="question-number">第 {{ index + 1 }} 题</span>
                <span class="question-type">{{ getQuestionTypeText(question.type) }}</span>
                <span class="question-score">{{ getQuestionScore(question.type) }}分</span>
              </div>
              <div class="question-content">
                <p class="question-text">{{ question.title || question.content }}</p>
                <div v-if="question.options && question.options.length > 0" class="question-options">
                  <div v-for="option in question.options" :key="option.key" class="option-item">
                    <span class="option-label">{{ option.key }}.</span>
                    <span class="option-content">{{ option.content }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <el-form :model="currentPaper.questionTypeConfig" label-width="150px" v-else class="paper-form">
            <el-form-item label="题库选择" required>
              <el-select v-model="currentPaper.questionTypeConfig.selectedBank" placeholder="请选择题库" @change="handleBankChange">
                <el-option
                  v-for="bank in questionBanks"
                  :key="bank.id"
                  :label="bank.name"
                  :value="bank.id"
                >
                  <span>{{ bank.name }}</span>
                  <span class="bank-count">({{ bank.questionCount }}题)</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题型选择" required>
              <el-checkbox-group v-model="currentPaper.questionTypeConfig.selectedTypes" class="question-type-group">
                <el-checkbox 
                  v-for="type in availableTypes" 
                  :key="type.value"
                  :label="type.label"
                  :disabled="!type.available"
                >
                  {{ type.label }}
                  <span class="type-count" v-if="type.count !== undefined">({{ type.count }}题)</span>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <template v-for="type in currentPaper.questionTypeConfig.selectedTypes" :key="type">
              <el-form-item :label="type + '个数'" required>
                <el-input-number 
                  v-model="currentPaper.questionTypeConfig[type].count" 
                  :min="0" 
                  :max="getTypeMaxCount(type)"
                  controls-position="right"
                ></el-input-number>
              </el-form-item>
              <el-form-item :label="type + '分值'" required>
                <el-input-number 
                  v-model="currentPaper.questionTypeConfig[type].score" 
                  :min="0" 
                  :max="100"
                  controls-position="right"
                ></el-input-number>
              </el-form-item>
              <el-form-item :label="type + '规则'">
                <el-input 
                  v-model="currentPaper.questionTypeConfig[type].rule" 
                  type="textarea" 
                  :rows="2" 
                  placeholder="请输入规则说明"
                ></el-input>
              </el-form-item>
            </template>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="权限配置" name="permission">
          <el-descriptions :column="2" border v-if="!isEdit" class="paper-descriptions">
            <el-descriptions-item label="答题限制选项">{{ currentPaper.permissionConfig?.answerRestrictions }}</el-descriptions-item>
            <el-descriptions-item label="试卷密码">{{ currentPaper.permissionConfig?.paperPassword ? '是' : '否' }}</el-descriptions-item>
            <el-descriptions-item label="发布考试">{{ currentPaper.permissionConfig?.publishExam ? '是' : '否' }}</el-descriptions-item>
          </el-descriptions>
          <el-form :model="currentPaper.permissionConfig" label-width="150px" v-else class="paper-form">
            <el-form-item label="答题限制选项" required>
              <el-select v-model="currentPaper.permissionConfig.answerRestrictions" placeholder="请选择答题限制">
                <el-option label="每人一次" value="once"></el-option>
                <el-option label="每人两次" value="twice"></el-option>
                <el-option label="每人三次" value="thrice"></el-option>
                <el-option label="无限制" value="unlimited"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="试卷密码">
              <el-switch v-model="currentPaper.permissionConfig.paperPassword"></el-switch>
            </el-form-item>
            <el-form-item label="发布考试">
              <el-switch v-model="currentPaper.permissionConfig.publishExam"></el-switch>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="其他配置" name="other">
          <el-descriptions :column="2" border v-if="!isEdit" class="paper-descriptions">
            <el-descriptions-item label="答题成绩发布方式">{{ currentPaper.otherConfig?.scoreReleaseMethod === 'automatic' ? '考完自动发布' : '手动发布' }}</el-descriptions-item>
            <el-descriptions-item label="题库练习开关">{{ currentPaper.otherConfig?.questionBankPractice ? '开启' : '关闭' }}</el-descriptions-item>
            <el-descriptions-item label="允许切屏次数">{{ currentPaper.otherConfig?.screenSwitchLimit }}</el-descriptions-item>
            <el-descriptions-item label="考试结束语">{{ currentPaper.otherConfig?.examEndMessage }}</el-descriptions-item>
            <el-descriptions-item label="答题明细显示">{{ currentPaper.otherConfig?.showAnswerDetails ? '显示' : '不显示' }}</el-descriptions-item>
            <el-descriptions-item label="成绩排行榜显示">{{ currentPaper.otherConfig?.showScoreRanking ? '显示' : '不显示' }}</el-descriptions-item>
          </el-descriptions>
          <el-form :model="currentPaper.otherConfig" label-width="150px" v-else class="paper-form">
            <el-form-item label="答题成绩发布方式" required>
              <el-radio-group v-model="currentPaper.otherConfig.scoreReleaseMethod">
                <el-radio label="automatic">考完自动发布</el-radio>
                <el-radio label="manual">手动发布</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="题库练习开关">
              <el-switch v-model="currentPaper.otherConfig.questionBankPractice"></el-switch>
            </el-form-item>
            <el-form-item label="允许切屏次数" required>
              <el-select v-model="currentPaper.otherConfig.screenSwitchLimit" placeholder="请选择允许切屏次数">
                <el-option label="一次" value="once"></el-option>
                <el-option label="两次" value="twice"></el-option>
                <el-option label="三次" value="thrice"></el-option>
                <el-option label="无限制" value="unlimited"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="考试结束语">
              <el-input v-model="currentPaper.otherConfig.examEndMessage" type="textarea" :rows="3" placeholder="请输入考试结束语"></el-input>
            </el-form-item>
            <el-form-item label="答题明细显示">
              <el-switch v-model="currentPaper.otherConfig.showAnswerDetails"></el-switch>
            </el-form-item>
            <el-form-item label="成绩排行榜显示">
              <el-switch v-model="currentPaper.otherConfig.showScoreRanking"></el-switch>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave" v-if="isEdit">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 创建试卷对话框 -->
    <el-dialog
      v-model="createDialogVisible"
      title="创建试卷"
      width="30%"
      :close-on-click-modal="false"
      center
    >
      <div class="create-options">
        <div class="option-item" @click="goToCreatePaper('manual')">
          <el-icon><EditPen /></el-icon>
          <span>手动创建</span>
          <p>自定义试卷内容，灵活设置题型和分值</p>
        </div>
        <div class="option-item" @click="goToCreatePaper('template')">
          <el-icon><Files /></el-icon>
          <span>从模板创建</span>
          <p>使用预设模板快速创建试卷</p>
        </div>
        <div class="option-item" @click="goToCreatePaper('import')">
          <el-icon><Upload /></el-icon>
          <span>导入试卷</span>
          <p>从文件导入已有试卷</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { EditPen, Files, Upload } from '@element-plus/icons-vue';

const router = useRouter();
const paperList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const viewDialogVisible = ref(false);
const currentPaper = ref({});
const activeTab = ref('basicInfo');
const isEdit = ref(false);
const createDialogVisible = ref(false);

const questionBanks = ref([]);
const availableTypes = ref([]);

const loadPaperList = () => {
  const storedPapers = localStorage.getItem('paperList');
  if (storedPapers) {
    const allPapers = JSON.parse(storedPapers);
    total.value = allPapers.length;
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    paperList.value = allPapers.slice(start, end);
  }
};

// 获取题库列表
const loadQuestionBanks = () => {
  const storedBanks = localStorage.getItem('questionBanks');
  if (storedBanks) {
    questionBanks.value = JSON.parse(storedBanks);
  }
};

// 处理题库选择变化
const handleBankChange = (bankId) => {
  const selectedBank = questionBanks.value.find(bank => bank.id === bankId);
  if (selectedBank) {
    // 更新可用题型
    availableTypes.value = [
      { 
        label: '单选题', 
        value: 'choice', 
        count: selectedBank.questionCounts?.choice || 0, 
        available: selectedBank.questionCounts?.choice > 0 
      },
      { 
        label: '多选题', 
        value: 'multiple', 
        count: selectedBank.questionCounts?.multiple || 0, 
        available: selectedBank.questionCounts?.multiple > 0 
      },
      { 
        label: '判断题', 
        value: 'judge', 
        count: selectedBank.questionCounts?.judge || 0, 
        available: selectedBank.questionCounts?.judge > 0 
      },
      { 
        label: '填空题', 
        value: 'fill', 
        count: selectedBank.questionCounts?.fill || 0, 
        available: selectedBank.questionCounts?.fill > 0 
      },
      { 
        label: '问答题', 
        value: 'essay', 
        count: selectedBank.questionCounts?.essay || 0, 
        available: selectedBank.questionCounts?.essay > 0 
      },
      { 
        label: '组合题', 
        value: 'composite', 
        count: selectedBank.questionCounts?.composite || 0, 
        available: selectedBank.questionCounts?.composite > 0 
      }
    ];

    // 重置已选题型
    currentPaper.value.questionTypeConfig.selectedTypes = [];
    currentPaper.value.questionTypeConfig = {
      ...currentPaper.value.questionTypeConfig,
      selectedBank: bankId
    };
  }
};

// 获取题型最大题目数
const getTypeMaxCount = (type) => {
  const selectedBank = questionBanks.value.find(bank => bank.id === currentPaper.value.questionTypeConfig.selectedBank);
  if (selectedBank) {
    const typeMap = {
      '单选题': 'choice',
      '多选题': 'multiple',
      '判断题': 'judge',
      '填空题': 'fill',
      '问答题': 'essay',
      '组合题': 'composite'
    };
    return selectedBank.questionCounts?.[typeMap[type]] || 0;
  }
  return 0;
};

onMounted(() => {
  loadPaperList();
  loadQuestionBanks();
});

const showCreateDialog = () => {
  createDialogVisible.value = true;
};

const goToCreatePaper = (type) => {
  createDialogVisible.value = false;
  router.push({
    path: '/main/paper/create',
    query: { type }
  });
};

const handleEdit = (row) => {
  currentPaper.value = JSON.parse(JSON.stringify(row));
  isEdit.value = true;
  viewDialogVisible.value = true;
};

const handleView = async (row) => {
  try {
    // 从本地存储获取题库数据
    const storedBanks = localStorage.getItem('questionBanks');
    if (!storedBanks) {
      ElMessage.error('未找到题库数据');
      return;
    }

    const banks = JSON.parse(storedBanks);
    const bank = banks.find(b => b.id === row.paperInfo?.questionBank);
    
    if (!bank || !bank.questions) {
      ElMessage.error('未找到题库题目数据');
      return;
    }

    // 获取试卷中的题目ID列表
    const questionIds = row.questions?.map(q => q.id) || [];
    
    // 从题库中获取完整的题目数据
    const fullQuestions = bank.questions.filter(q => questionIds.includes(q.id));
    
    // 更新当前试卷数据，包含完整的题目信息
    currentPaper.value = {
      ...row,
      questions: fullQuestions
    };
    
    isEdit.value = false;
    viewDialogVisible.value = true;
    activeTab.value = 'questionType';
  } catch (error) {
    console.error('获取题目数据失败:', error);
    ElMessage.error('获取题目数据失败');
  }
};

const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除该试卷吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const storedPapers = localStorage.getItem('paperList');
    if (storedPapers) {
      const paperList = JSON.parse(storedPapers).filter(paper => paper.id !== row.id);
      localStorage.setItem('paperList', JSON.stringify(paperList));
      loadPaperList();
      ElMessage.success('删除成功');
    }
  });
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  loadPaperList();
};

const getRandomQuestions = (type, count, bankId) => {
  // 从本地存储获取题库数据
  const storedBanks = localStorage.getItem('questionBanks');
  if (!storedBanks) return [];

  try {
    const banks = JSON.parse(storedBanks);
    const bank = banks.find(b => b.id === bankId);
    if (!bank || !bank.questions) return [];

    // 获取指定类型的题目
    const typeQuestions = bank.questions.filter(q => {
      const typeMap = {
        '单选题': 'single',
        '多选题': 'multiple',
        '判断题': 'judge',
        '填空题': 'fill',
        '问答题': 'essay',
        '组合题': 'composite'
      };
      return q.type === typeMap[type];
    });

    // 如果题目数量不足，返回所有题目
    if (typeQuestions.length <= count) {
      return typeQuestions;
    }

    // 随机打乱题目顺序
    const shuffled = [...typeQuestions].sort(() => 0.5 - Math.random());
    // 返回指定数量的题目
    return shuffled.slice(0, count);
  } catch (error) {
    console.error('获取随机题目失败:', error);
    return [];
  }
};

const handleSave = () => {
  const storedPapers = localStorage.getItem('paperList');
  if (storedPapers) {
    const paperList = JSON.parse(storedPapers);
    const index = paperList.findIndex(p => p.id === currentPaper.value.id);
    
    if (index !== -1) {
      // 收集所有配置的题目
      const allQuestions = [];
      const selectedTypes = currentPaper.value.questionTypeConfig.selectedTypes;
      
      selectedTypes.forEach(type => {
        const count = currentPaper.value.questionTypeConfig[type].count;
        const bankId = currentPaper.value.questionTypeConfig.selectedBank;
        
        // 获取随机题目
        const randomQuestions = getRandomQuestions(type, count, bankId);
        allQuestions.push(...randomQuestions);
      });

      // 更新试卷数据
      const updatedPaper = {
        ...paperList[index],
        paperName: currentPaper.value.paperInfo.paperName,
        totalScore: currentPaper.value.paperInfo.totalScore,
        paperInfo: currentPaper.value.paperInfo,
        questionTypeConfig: currentPaper.value.questionTypeConfig,
        permissionConfig: currentPaper.value.permissionConfig,
        otherConfig: currentPaper.value.otherConfig,
        questions: allQuestions // 添加随机选择的题目
      };

      paperList[index] = updatedPaper;
      localStorage.setItem('paperList', JSON.stringify(paperList));
      loadPaperList();
      ElMessage.success('试卷更新成功！');
      viewDialogVisible.value = false;
    } else {
      ElMessage.error('未找到试卷数据');
    }
  }
};

// 添加新的辅助函数
const getQuestionTypeText = (type) => {
  const typeMap = {
    'single': '单选题',
    'multiple': '多选题',
    'judge': '判断题',
    'fill': '填空题',
    'essay': '问答题',
    'composite': '组合题',
    'choice': '选择题'  // 添加可能的类型映射
  };
  return typeMap[type] || type;
};

const getQuestionScore = (type) => {
  if (!currentPaper.value?.questionTypeConfig) return 0;
  const typeMap = {
    'single': '单选题',
    'multiple': '多选题',
    'judge': '判断题',
    'fill': '填空题',
    'essay': '问答题',
    'composite': '组合题',
    'choice': '选择题'  // 添加可能的类型映射
  };
  const typeText = typeMap[type] || type;
  return currentPaper.value.questionTypeConfig[typeText]?.score || 0;
};
</script>

<style scoped>
.paper-list-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
  height: calc(100vh - 250px);
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-container {
  flex: 1;
  overflow: auto;
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}

.create-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.option-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.option-item:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}

.option-item .el-icon {
  font-size: 24px;
  margin-bottom: 10px;
  color: #409eff;
}

.option-item span {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.option-item p {
  font-size: 14px;
  color: #909399;
  text-align: center;
}

/* 新增样式 */
.paper-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 30px;
  }
}

.paper-tabs {
  :deep(.el-tabs__content) {
    padding: 20px 0;
  }
}

.paper-descriptions {
  margin: 20px 0;
}

.paper-form {
  max-width: 800px;
  margin: 0 auto;
}

.input-with-unit {
  display: flex;
  align-items: center;
  gap: 10px;
}

.unit {
  color: #606266;
}

.question-type-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

:deep(.el-form-item.is-required .el-form-item__label::before) {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

:deep(.el-input-number) {
  width: 180px;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-textarea__inner) {
  font-family: inherit;
}

:deep(.el-switch) {
  margin-right: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 20px;
}

.bank-count {
  color: #909399;
  margin-left: 8px;
  font-size: 13px;
}

.type-count {
  color: #909399;
  margin-left: 4px;
  font-size: 13px;
}

:deep(.el-checkbox.is-disabled) {
  opacity: 0.6;
}

:deep(.el-checkbox.is-disabled .el-checkbox__label) {
  color: #909399;
}

.question-preview {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.preview-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

.preview-question {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.preview-question:last-child {
  margin-bottom: 0;
}

.question-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.question-number {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.question-type {
  font-size: 14px;
  color: #409eff;
  background-color: #ecf5ff;
  padding: 4px 12px;
  border-radius: 4px;
}

.question-score {
  font-size: 14px;
  color: #f56c6c;
  background-color: #fef0f0;
  padding: 4px 12px;
  border-radius: 4px;
}

.question-content {
  padding: 0 10px;
}

.question-text {
  font-size: 15px;
  color: #303133;
  line-height: 1.6;
  margin-bottom: 16px;
}

.question-options {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 16px;
}

.option-item {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: flex-start;
}

.option-item:last-child {
  margin-bottom: 0;
}

.option-label {
  font-weight: 600;
  color: #409eff;
  min-width: 24px;
}

.option-content {
  color: #606266;
  line-height: 1.6;
}
</style>